<template>
  <div class="home">
    <el-input class="custom-search-input" v-model="searchQuery" placeholder="搜索"></el-input>

    <ImageItem v-for="item in filteredList" :key="item.id" :data="item" />

    <el-divider> END </el-divider>
  </div>
</template> 

<script setup>
import { ref, computed } from 'vue';
import ImageItem from '@/components/ImageItem.vue';
import ImgList from '@/mock/images';

const list = ref(ImgList);
const searchQuery = ref('');

const filteredList = computed(() => {
  if (!searchQuery.value) {
    return list.value;
  }
  const lowerCaseQuery = searchQuery.value.trim().toLowerCase();
  return list.value.filter(item => {
    const hasTitle = item.title && item.title.toLowerCase().includes(lowerCaseQuery);
    const hasDesc = item.desc || item.description 
      ? (item.desc || item.description).toLowerCase().includes(lowerCaseQuery)
      : false;
    const hasTag = item.tag && item.tag.toLowerCase().includes(lowerCaseQuery); 
    return hasTitle || hasDesc || hasTag;
  });
});    
</script>

<style scoped>
.home-link {
  margin-right: 1vw;
  color: #000;
}

.home{
  background-color: #fff;
  width: 95%;
}
.image_detail {
  background: #fff;
  padding: 2vw;
  min-height: 80vh;
}

.title {
  color: var(--textColor);
  text-align: center;
}

.tag {
  text-align: center;
  margin: 2vh 0;
}

.image {
  width: 100%;
  max-height: 40vw;
  overflow: hidden;
}

.img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.3s;
}

.dec {
  color: #666;
  line-height: 2.5vh;
  margin-top: 3vh;
  font-size: 1.2rem;
  text-wrap: wrap;
}

.custom-search-input {
  top: 3vh;
  width: 25vw;
  left: 3.5vw;
}

@media (max-width: 768px) {
  .dec {
    font-size: 1rem;
  }
}
</style>
